import * as echarts from 'echarts'
const CubeLeft = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0
	},
	buildPath: function (ctx, shape) {
		const xAxisPoint = shape.xAxisPoint
		const c0 = [shape.x, shape.y]
		const c1 = [shape.x - 9, shape.y - 9]
		const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
		const c3 = [xAxisPoint[0], xAxisPoint[1]]
		ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
	}
})
const CubeRight = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0
	},
	buildPath: function (ctx, shape) {
		const xAxisPoint = shape.xAxisPoint
		const c1 = [shape.x, shape.y]
		const c2 = [xAxisPoint[0], xAxisPoint[1]]
		const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
		const c4 = [shape.x + 18, shape.y - 9]
		ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
	}
})
const CubeTop = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0
	},
	buildPath: function (ctx, shape) {
		const c1 = [shape.x, shape.y]
		const c2 = [shape.x + 18, shape.y - 9]
		const c3 = [shape.x + 9, shape.y - 18]
		const c4 = [shape.x - 9, shape.y - 9]
		ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
	}
})
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)
export default {
	getCountDateOption: (xData, seriesData) => {
		let option = {
			grid: {
				//与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
				top: "10%",
				left: "7%",
				right: "5%",
				bottom: "7%"
			},
			xAxis: {
				type: 'category',
				// boundaryGap: false,
				axisLabel: {
					textStyle: {
						fontSize: 16,
						color: '#718096'
					},
					formatter: function (value) {
						var texts = value;
						texts += ('月');
						return texts;
					}
				},
				data: xData
			},
			yAxis: {
				type: 'value',
				axisLine: {
					show: true
				},
				splitLine: {
					lineStyle: {
						color: "#F0F0F0",
					},
				},
				axisTick: {
					show: true,
				},
				axisLabel: {
					textStyle: {
						fontSize: 16,
						color: '#718096'
					},
					formatter: function (value) {
						var texts = value;
						texts += ('部');
						return texts;
					}
				},
			},
			series: [
				{
					data: seriesData,
					type: 'line',
					smooth: true,
					symbol: "circle",
					symbolSize: 6,
					lineStyle: {
						width: 3,
						color: "rgba(60, 185, 226, 1)", //线条颜色
						// type: "dotted", //'dotted'虚线 'solid'实线
						shadowColor: "rgba(60, 185, 226, 1)", //阴影颜色
						shadowBlur: 5, //阴影的模糊大小。
						shadowOffsetX: 5, // 阴影水平方向上的偏移距离
						shadowOffsetY: 5 // 阴影垂直方向上的偏移距离
					},
					areaStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: "rgba(43, 218, 230, 0.7)",
							},
							{
								offset: 1,
								color: "rgba(79, 250, 227, 0.1)",
							},
						]),
					},
				}
			]
		};
		return option;
	},
	getTypeCountOption: (data, typeCountEchart) => {
		let option = {
			title: {
				text: '类型统计',
				left: '5%',
				top: '5%',
				textStyle: {
					color: '#000',
					fontWeight: 'bold',
					fontSize: 28
				}
			},
			tooltip: {
				trigger: 'item'
			},
			// legend: {
			//   top: '5%',
			//   left: 'center'
			// },
			series: [
				{
					name: '地区统计',
					type: 'pie',
					radius: ['20%', '50%'],
					itemStyle: {
						borderRadius: 10,
						borderColor: '#fff',
						borderWidth: 2
					},
					label: {
						alignTo: 'edge',
						formatter: '{name|{b}}\n{time|{c} 部}',
						// minMargin: 10,
						// maxMargin: 10,
						fontSize: 16,
						edgeDistance: 50,
						lineHeight: 25,
						rich: {
							time: {
								fontSize: 16,
								color: '#999'
							}
						}
					},
					labelLayout: function (params) {
						const isLeft = params.labelRect.x < typeCountEchart.getWidth() / 2;
						const points = params.labelLinePoints;
						// Update the end point.
						points[2][0] = isLeft
							? params.labelRect.x
							: params.labelRect.x + params.labelRect.width;
						return {
							labelLinePoints: points
						};
					},
					data: data
				}
			]
		};
		return option;
	},
	getTypeActorsOption: (yData, seriesData) => {
		let option = {
			title: {
				text: '参演电影排行',
				left: '5%',
				top: '5%',
				textStyle: {
					color: '#000',
					fontWeight: 'bold',
					fontSize: 28
				}
			},
			tooltip: {
				trigger: 'axis',
				show: false,
				axisPointer: { // 坐标轴指示器，坐标轴触发有效
					type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				},
			},
			grid: {
				top: '15%',
				left: '5%',
				right: '4%',
				bottom: '0%',
				containLabel: true
			},
			xAxis: [{
				splitLine: {
					show: false
				},
				type: 'value',
				show: false,
			}],
			yAxis: [{
				splitLine: {
					show: false
				},
				axisLine: { //y轴
					show: false
				},
				type: 'category',
				axisTick: {
					show: false
				},
				data: yData,
				axisLabel: {
					textStyle: {
						fontSize: 16,
						color: '#000'
					},
				}
			}],
			series: [{
				name: '标准化',
				type: 'bar',
				barWidth: 30, // 柱子宽度
				label: {
					show: true,
					position: 'right', // 位置
					color: '#555',
					fontSize: 16,
					fontWeight: 'bold', // 加粗
					distance: 5, // 距离
					formatter: function (data) {
						return data.value + '部';
					},
				}, // 柱子上方的数值
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0.5, 1, [{
							offset: 1,
							color: 'rgba(43, 218, 230,1)'
						}, {
							offset: 0,
							color: 'rgba(79, 250, 227,.5)'
						}]),
						borderColor: '#23a5e2',
						borderWidth: 2,
						barBorderRadius: [0, 10, 10, 0],
						shadowColor: 'rgba(168,225,226,0.5)',
						opacity: .6

					},
					emphasis: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: 'rgba(13,164,171,1)'
						}, {
							offset: 1,
							color: 'rgba(64,180,157,.1)'
						}]),
						borderColor: '#0ea4a6',
						borderWidth: 2,
						barBorderRadius: [9, 9, 0, 0],
						shadowBlur: 30,
						opacity: .7,
						label: {
							show: true,
							textStyle: {
								color: 'rgba(150,197,188,1)'
							}

						}
					}
				},
				data: seriesData
			},]
		};
		return option;
	},
	getAreaCountOption: (xData, seriesData) => {
		let option = {
			title: {
				text: '区域统计',
				left: '3%',
				top: '5%',
				textStyle: {
					color: '#000',
					fontWeight: 'bold',
					fontSize: 28
				}
			},
			backgroundColor: '#fff',
			grid: {
				top: '25%',
				right: '10%',
				left: '10%',
				bottom: '10%'
			},
			xAxis: [{
				type: 'category',
				color: '#59588D',
				data: xData,
				axisLabel: {
					margin: 20,
					color: '#999',
					textStyle: {
						fontSize: 16
					},
				},
				axisLine: {
					lineStyle: {
						color: 'rgba(107,107,107,0.37)',
					}
				},
				axisTick: {
					show: false
				},
			}],
			yAxis: [{
				axisLabel: {
					formatter: '{value}%',
					color: '#999',
					textStyle: {
						fontSize: 16
					},
				},
				axisLine: {
					lineStyle: {
						color: 'rgba(107,107,107,0.37)',
					}
				},
				axisTick: {
					show: false
				},
				splitLine: {
					lineStyle: {
						color: 'rgba(131,101,101,0.2)',
						type: 'dashed',
					}
				}
			}],
			dataZoom: [
				{
					startValue: 0,
					endValue: 12,
					type: 'slider',
					xAxisIndex: 0,
					filterMode: 'none'
				},
			],
			series: [{
				type: 'bar',
				data: seriesData,
				barWidth: '20px',
				itemStyle: {
					normal: {
						color: function () {
							let colorArr = ['#FF9A22', '#FFD56E'];
							return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: colorArr[0] // 0% 处的颜色
							}, {
								offset: 1,
								color: colorArr[1]// 100% 处的颜色
							}], false)
						},
						barBorderRadius: [30, 30, 0, 0]
					},
				},
				label: {
					normal: {
						show: true,
						fontSize: 18,
						fontWeight: 'bold',
						color: '#333',
						position: 'top',
					}
				}
			}]
		};
		return option;
	},
	/* 单柱图 */
	getSingleBar: (xData, yData, maxArr) => {
		let option;
		option = {
			tooltip: {
				trigger: 'item',
			},
			grid: {
				left: 20,
				right: 20,
				bottom: 60,
				top: 10,
				containLabel: true
			},
			xAxis: {
				type: 'category',
				data: xData,
				axisLine: {
					show: true,
					lineStyle: {
						color: 'white'
					}
				},
				offset: 20,
				axisTick: {
					show: false,
					length: 9,
					alignWithLabel: true,
					lineStyle: {
						color: '#7DFFFD'
					}
				},
				axisLabel: {
					fontSize: 14
				}
			},
			yAxis: {
				type: 'value',
				axisLine: {
					show: true,
					lineStyle: {
						color: 'white'
					}
				},
				splitLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					fontSize: 14
				},
				boundaryGap: ['20%', '20%']
			},
			series: [{
				type: 'custom',
				renderItem: function (params, api) {
					const location = api.coord([api.value(0), api.value(1)])
					return {
						type: 'group',
						children: [{
							type: 'CubeLeft',
							shape: {
								api,
								xValue: api.value(0),
								yValue: api.value(1),
								x: location[0],
								y: location[1],
								xAxisPoint: api.coord([api.value(0), 0])
							},
							style: {
								fill: 'rgba(7,29,97,.6)'
							}
						}, {
							type: 'CubeRight',
							shape: {
								api,
								xValue: api.value(0),
								yValue: api.value(1),
								x: location[0],
								y: location[1],
								xAxisPoint: api.coord([api.value(0), 0])
							},
							style: {
								fill: 'rgba(10,35,108,.7)'
							}
						}, {
							type: 'CubeTop',
							shape: {
								api,
								xValue: api.value(0),
								yValue: api.value(1),
								x: location[0],
								y: location[1],
								xAxisPoint: api.coord([api.value(0), 0])
							},
							style: {
								fill: 'rgba(11,42,106,.8)'
							}
						}]
					}
				},
				data: maxArr
			}, {
				type: 'custom',
				renderItem: (params, api) => {
					const location = api.coord([api.value(0), api.value(1)])
					return {
						type: 'group',
						children: [{
							type: 'CubeLeft',
							shape: {
								api,
								xValue: api.value(0),
								yValue: api.value(1),
								x: location[0],
								y: location[1],
								xAxisPoint: api.coord([api.value(0), 0])
							},
							style: {
								fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#3B80E2'
								},
								{
									offset: 1,
									color: '#49BEE5'
								}
								])
							}
						}, {
							type: 'CubeRight',
							shape: {
								api,
								xValue: api.value(0),
								yValue: api.value(1),
								x: location[0],
								y: location[1],
								xAxisPoint: api.coord([api.value(0), 0])
							},
							style: {
								fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#3B80E2'
								},
								{
									offset: 1,
									color: '#49BEE5'
								}
								])
							}
						}, {
							type: 'CubeTop',
							shape: {
								api,
								xValue: api.value(0),
								yValue: api.value(1),
								x: location[0],
								y: location[1],
								xAxisPoint: api.coord([api.value(0), 0])
							},
							style: {
								fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#3B80E2'
								},
								{
									offset: 1,
									color: '#49BEE5'
								}
								])
							}
						}]
					}
				},
				data: yData
			}]
		}
		return option;
	},
	/* 玫瑰饼图 */
	getRose: (data) => {
		let option;
		option = {
			tooltip: {
				trigger: 'item',
				formatter: '{b} : {c} ({d}%)'
			},
			series: [{
				name: 'Nightingale Chart',
				type: 'pie',
				radius: [50, 100],
				center: ['50%', '50%'],
				roseType: 'area',
				itemStyle: {
					borderRadius: 8
				},
				data: data
			}]
		};

		return option;
	},
	/* 饼图 */
	getPie: (data) => {
		let option;
		option = {
			tooltip: {
				trigger: 'item',
				formatter: '{b} : {c} ({d}%)'
			},
			series: [{
				type: 'pie',
				radius: [50, 100],
				center: ['50%', '50%'],
				itemStyle: {
					borderRadius: 5,
					borderWidth: 2
				},
				data: data
			}]
		};

		return option;
	},
	/* 排行榜 */
	getTop: (xData, yData) => {
		var color = ['#ff9500', '#02d8f9', '#027fff']
		var color1 = ['#ffb349', '#70e9fc', '#4aa4ff']
		let lineY = []
		// let lineT = []
		for (var i = 0; i < xData.length; i++) {
			var x = i
			if (x > 1) {
				x = 2
			}
			var data = {
				name: xData[i],
				color: color[x],
				value: yData[i],
				itemStyle: {
					normal: {
						show: true,
						color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
							offset: 0,
							color: color[x]
						}, {
							offset: 1,
							color: color1[x]
						}], false),
						barBorderRadius: 10
					},
					emphasis: {
						shadowBlur: 15,
						shadowColor: 'rgba(0, 0, 0, 0.1)'
					}
				}
			}
			lineY.push(data)
		}
		let option;
		option = {
			tooltip: {
				trigger: 'item',
				formatter: (p) => {
					if (p.seriesName === 'total') {
						return ''
					}
					return `${p.name}<br/>${p.value}`
				}
			},
			grid: {
				top: 20,
				left: 80,
				right: 40,
				bottom: 10
			},
			color: color,
			yAxis: [{
				type: 'category',
				inverse: true,
				axisTick: {
					show: false
				},
				axisLine: {
					show: false
				},
				axisLabel: {
					show: false,
					inside: false
				},
				data: xData
			}, {
				type: 'category',
				inverse: true,
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					show: true,
					color: 'red',
					fontWeight: '600'
				},
				splitArea: {
					show: false
				},
				splitLine: {
					show: false
				},
				data: yData
			}],
			xAxis: {
				type: 'value',
				axisTick: {
					show: false
				},
				axisLine: {
					show: false
				},
				splitLine: {
					show: false
				},
				axisLabel: {
					show: false
				}
			},
			series: [{
				name: 'bar',
				type: 'bar',
				zlevel: 2,
				barWidth: '10px',
				data: lineY,
				label: {
					normal: {
						color: '#b3ccf8',
						show: true,
						position: ['-70px', 0],
						textStyle: {
							fontSize: 14
						},
						formatter: function (a) {
							let num = ''
							let str = ''
							if (a.dataIndex + 1 < 10) {
								num = '0' + (a.dataIndex + 1);
							} else {
								num = (a.dataIndex + 1);
							}
							if (a.dataIndex === 0) {
								str = `{color1|${num}} {color4|${a.name}}`
							} else if (a.dataIndex === 1) {
								str = `{color2|${num}} {color4|${a.name}}`
							} else {
								str = `{color3|${num}} {color4|${a.name}}`
							}
							return str;
						},
						rich: {
							color1: {
								color: '#ff9500',
								fontWeight: 700
							},
							color2: {
								color: '#02d8f9',
								fontWeight: 700
							},
							color3: {
								color: '#027fff',
								fontWeight: 700
							},
							color4: {
								color: '#e5eaff'
							}
						}
					}
				}
			}],
		}

		return option
	}

}